<template>
  <div class="block" @mouseenter="blockStatus(true)" @mouseleave="blockStatus(false)" @dblclick="dblclickPlaySong">
    <div class="left">
      <div class="img">
        <img :src="songInfo.pic.replace(/^([a-zA-Z]+:\/\/)?/, 'https://')" />
      </div>
      <div class="text">
        <div class="title" v-html="songInfo.title"></div>
        <div class="author">{{ songInfo.author }}</div>
      </div>
    </div>
    <div class="operation" v-if="isHover">
      <n-icon class="icon" @click="operation('addPlayingList')">
        <PlusOutlined />
      </n-icon>
      <n-icon class="icon" @click="operation('addSongMenu')">
        <HeartTwotone />
      </n-icon>
      <n-icon class="icon" @click="operation('delete')" v-show="deleteInfo.canDelete">
        <DeleteTwotone />
      </n-icon>
      <n-icon class="icon" @click="operation('openBrowerLink')">
        <LinkOutlined />
      </n-icon>
    </div>
  </div>
  <OperateMenu :menuInfo="menuInfo" ref="addSongMenu" />
</template>

<script setup>
import { ref, getCurrentInstance, inject } from 'vue';
import { PlusOutlined, HeartTwotone, DeleteTwotone, LinkOutlined } from '@vicons/antd';
import defaultMusic from '/defaultMusic.png';

const instance = getCurrentInstance();
const playerIsShow = instance.appContext.config.globalProperties.$playerIsShow;
const playSong = instance.appContext.config.globalProperties.$playSong;

function handleImageError(event) {
  event.target.src = defaultMusic;
}
const props = defineProps({
  songInfo: {
    type: Object,
    default: () => {},
  },
  deleteInfo: {
    type: Object,
    default: () => ({
      canDelete: false,
      index: -1,
    }),
  },
});
const isHover = ref(false);
function blockStatus(status) {
  isHover.value = status;
}

async function dblclickPlaySong() {
  playerIsShow(true);
  localStorage.addSong(props.songInfo);
  playSong && playSong(0);
}

let deleteSong = null;
const menuInfo = ref({});
const addSongMenu = ref(null);
function operation(operate) {
  switch (operate) {
    case 'addPlayingList':
      localStorage.addSong(props.songInfo, false);
      break;
    case 'addSongMenu':
      menuInfo.value = {
        type: 'add',
        songInfo,
      };
      addSongMenu.value.updateSongMenuNameList();
      addSongMenu.value.operateInfo.isShow = true;
      break;
    case 'delete':
      deleteSong(props.deleteInfo.index);
      break;
    case 'openBrowerLink':
      window.Operation.openLink(songInfo.link);
      break;
  }
}

onMounted(() => {
  if (props.deleteInfo.canDelete) {
    deleteSong = inject('deleteSong');
  }
});
</script>

<style lang="scss" scoped>
.block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70px;
  padding: 10px 70px 10px 10px;
  border-radius: 20px;
  transition: width 0.3s ease;

  &:hover {
    background-color: #f2f2f7;
  }

  .left {
    display: flex;
    align-items: center;

    .img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 46px;
      margin-right: 20px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .text {
      .title {
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 19px;
        font-weight: 700;
      }

      .author {
        font-size: 13px;
        color: #868686;
      }
    }
  }

  .operation {
    display: flex;
    align-items: center;

    .icon {
      font-size: 20px;
      margin-right: 10px;

      &:hover {
        color: rgba($color: #21a3ee, $alpha: 1);
      }
    }
  }
}
</style>
